<template>
  <div>
    <my-breadcrumb :items="['商品管理', '商品审核']"></my-breadcrumb>
    <Card dis-hover>
      <goods-search @search="searchGoods" @getAll="getAll"></goods-search>
    </Card>
    <div class="list">
      <Table style="min-width: 1200px;" :columns="goodsCol" :data="goodsList" :loading="isLoading" @on-row-click="extendRow"></Table>
    </div>
    <Modal v-model="showSort" @on-ok="subSortUpdate" title="修改商品排序">
      商品权重：<InputNumber v-model="sortRow.sortWeight" :min="0" :max="100"/>
    </Modal>
    <page-info :page="page" @pageNumChange="pageNumChange" @pageSizeChange="pageSizeChange"></page-info>
  </div>
</template>

<script>
import goodsListTab from './goodsListTab'
import goodsSearch from './goodsSearch'
import pageInfo from '../../common/pageInfo'
export default {
  name: 'goods-list',
  data () {
    return {
      url: {
        goodsList: '/goods/manage/get/all/goods',
        setupsUrl: '/discount/setup/manage/select/all/branch/customer',
        search: '/goods/manage/get/goods/by/condition',
        down: '/goods/manage/modify/goods/status',
        updateSort: '/goods/manage/modify/goods/sort/weight'
      },
      isLoading: true,
      statusStr: [
        {name: '待审核', type: 'error'},
        {name: '已上架', type: 'primary'},
        {name: '已下架', type: 'ghost'}
      ],
      goodsCol: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            let _self = this
            return h(goodsListTab, {
              props: {
                id: params.row.goodsId,
                unit: params.row.unit,
                setups: _self.setups
              }
            })
          }
        },
        {
          title: '创建时间',
          key: 'gmtCreate',
          width: 170,
          align: 'center',
          render: (h, params) => {
            const convertData = val => {
              let data = new Date(parseInt(val))
              let timeY = data.toTimeString().substr(0, 8)
              let timeM = data.toLocaleDateString()
              return timeM + ' ' + timeY
            }
            return h('span', convertData(params.row.gmtCreate))
          }
        },
        {
          title: '商品',
          key: 'mainImagePath',
          render: (h, params) => {
            return h('div', {
              style: {
                padding: '8px',
                overflow: 'hidden'
              }
            }, [
              h('img', {
                attrs: {
                  src: this.staticUrl + params.row.mainImagePath,
                  width: '50px',
                  height: '50px'
                },
                style: {
                  float: 'left'
                }
              }),
              h('span', {
                style: {
                  float: 'left'
                }
              }, params.row.title)
            ])
          }
        },
        {
          title: '分类',
          key: 'category',
          width: 130,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              params.row.category.map(value => {
                return h('Tag', value)
              })
            ])
          }
        },
        {
          title: '单位',
          key: 'unit',
          align: 'center',
          width: 70
        },
        {
          title: '标签',
          key: 'label',
          align: 'center',
          width: 130,
          render: (h, params) => {
            if (params.row.label[0]) {
              return h('div', [
                params.row.label.map(value => {
                  return h('Tag', value)
                })
              ])
            }
            return h('span', '----')
          }
        },
        {
          title: '销量',
          key: 'goodsSalesCount',
          width: 70,
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          width: 130,
          render: (h, params) => {
            if (params.row.status === 1) {
              return h('Button', {
                props: {
                  size: 'small',
                  type: 'warning'
                },
                on: {
                  click: (event) => {
                    this.goodsDown(params.row.goodsId)
                    event.stopPropagation()
                  }
                }
              }, '下架')
            } else if (params.row.status === 2) {
              return h('div', [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error'
                  },
                  style: {
                    marginRight: '8px'
                  },
                  on: {
                    click: (event) => {
                      // 删除
                      event.stopPropagation()
                    }
                  }
                }, '删除'),
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'primary'
                  },
                  on: {
                    click: (event) => {
                      this.goodsUp(params.row.goodsId)
                      event.stopPropagation()
                    }
                  }
                }, '上架')
              ])
            }
          }
        },
        {
          title: '排序(点击修改)',
          key: 'sortWeight',
          align: 'center',
          width: 90,
          render: (h, params) => {
            return h('Button', {
              props: {
                size: 'small'
              },
              on: {
                click: (event) => {
                  this.toShowSort(params.row)
                  event.stopPropagation()
                }
              }
            }, params.row.sortWeight)
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 90,
          render: (h, params) => {
            return h('Button', {
              props: {
                type: this.statusStr[params.row.status].type,
                size: 'small'
              },
              on: {
                click: (event) => {
                  if (params.row.status === 0) {
                    this.$router.push({ path: '/goods/goodsAuditing', query: {id: params.row.goodsId} })
                  }
                  event.stopPropagation()
                }
              }
            }, this.statusStr[params.row.status].name)
          }
        },
        {
          title: '修改',
          width: 70,
          align: 'center',
          render: (h, params) => {
            let _self = this
            return h('Button', {
              props: {
                size: 'small',
                type: 'primary',
                disabled: params.row.status === 0
              },
              on: {
                click: (event) => {
                  _self.$router.push({ path: '/goods/goodsAuditing', query: {id: params.row.goodsId, change: 1} })
                  event.stopPropagation()
                }
              }
            }, '修改')
          }
        }
      ],
      goodsList: [],
      setups: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      sortRow: {},
      showSort: false,
      term: null,
      activeUrl: ''
    }
  },
  methods: {
    initPage () {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    },
    searchGoods (data) {
      this.initPage()
      let params = {
        provideGoodsQueryConditionDto: data,
        goodsPageQuery: {
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
      }
      this.term = params
      this.$ajax.post(this.url.search, JSON.stringify(params)).then(res => {
        this.setTableData(res)
      })
    },
    getAll () {
      this.initPage()
      this.term = null
      this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    },
    pageNumChange (page) {
      this.isLoading = true
      this.getQueryInfo(page.pageNum, page.pageSize, this.term)
    },
    pageSizeChange (page) {
      this.isLoading = true
      this.getQueryInfo(page.pageNum, page.pageSize, this.term)
    },
    getQueryInfo (pageNum, pageSize, term) {
      let params
      if (term) {
        this.activeUrl = this.url.search
        term.goodsPageQuery.pageNum = pageNum
        term.goodsPageQuery.pageSize = pageSize
        params = term
      } else {
        this.activeUrl = this.url.goodsList
        params = {
          pageNum,
          pageSize
        }
      }
      this.$ajax.post(this.activeUrl, JSON.stringify(params)).then(res => {
        if (res.data.success) {
          this.isLoading = false
        }
        this.setTableData(res)
      })
    },
    setTableData (res) {
      if (res.data.data === null) {
        this.goodsList = []
        return
      }
      let goods = []
      let category = res.data.data.goodsCategoryInfoList
      res.data.data.goodsShowInfoList && res.data.data.goodsShowInfoList.forEach((item, index) => {
        item.category = []
        item.label = []
        goods['P' + item.goodsId] = item
      })
      res.data.data.goodsLabelInfoList.forEach(item => {
        goods['P' + item.goodsId].label.push(item.labelName)
      })
      category.forEach(item => {
        goods['P' + item.goodsId].category.push(item.categoryName)
      })
      let goodsList = []
      for (let i in goods) {
        goodsList.push(goods[i])
      }
      this.goodsList = goodsList
      this.page.total = res.data.data.pageInfo.total
    },
    goodsDown (id) {
      this.$Modal.confirm({
        title: '下架商品',
        content: '你确定将此商品下架吗？',
        loading: true,
        onOk: () => {
          this.$ajax.post(this.url.down, {id, status: 2})
            .then(res => {
              if (res.data.success) {
                this.$Message.success('下架成功')
                this.getQueryInfo(this.page.pageNum, this.page.pageSize)
              }
              this.$Modal.remove()
            })
        }
      })
    },
    goodsUp (id) {
      this.$Modal.confirm({
        title: '上架商品',
        content: '你确定将此商品上架吗？',
        loading: true,
        onOk: () => {
          this.$ajax.post(this.url.down, {id, status: 1})
            .then(res => {
              if (res.data.success) {
                this.$Message.success('上架成功')
                this.getQueryInfo(this.page.pageNum, this.page.pageSize)
              }
              this.$Modal.remove()
            })
        }
      })
    },
    // _expanded  @on-row-click="extendRow"
    extendRow (row, index) {
      this.goodsList.forEach((item, i) => {
        if (i !== index && item._expanded) {
          this.$set(this.goodsList[i], '_expanded', false)
        }
      })
      this.$nextTick(() => {
        if (this.goodsList[index]._expanded) {
          this.$set(this.goodsList[index], '_expanded', false)
        } else {
          this.$set(this.goodsList[index], '_expanded', true)
        }
      })
    },
    toShowSort (row) {
      this.sortRow = row
      this.showSort = true
    },
    subSortUpdate () {
      this.$ajax.post(this.url.updateSort, {goodsId: this.sortRow.goodsId, sortWeight: this.sortRow.sortWeight})
        .then(res => {
          if (res.data.success) {
            this.$Message.success('更新成功')
            this.getQueryInfo(this.page.pageNum, this.page.pageSize)
          }
        })
    }
  },
  components: {
    goodsListTab,
    goodsSearch,
    pageInfo
  },
  created () {
    this.getQueryInfo(this.page.pageNum, this.page.pageSize)
    this.$ajax.get(this.url.setupsUrl).then(res => {
      this.setups = res.data.data
    })
  }
}
</script>

<style scoped>
.list{
  overflow: auto;
}
</style>
